<template>
	<view class="detailsinfo">
		<view class="details_title">
			<view>订单号：</view>
			<view>{{ option.orderNo }}</view>
		</view>
		<view class="detail_content">
			<view class="detail_header">
				<view class="information">
					<view>报修产品信息：</view>
				</view>
			</view>
			<view class="detail_list">
				<view class="list_item">
					<view class="item_name">报修时间：</view>
					<view class="item_content">{{ option.orderDate }}</view>
				</view>
				<view class="list_item">
					<view class="item_name">报修单位：</view>
					<view class="item_content">{{ option.repairUnit }}</view>
				</view>
				<view class="list_item">
					<view class="item_name">所在地区：</view>
					<view class="item_content">{{ option.area }}</view>
				</view>
				<view class="list_item">
					<view class="item_name">设备名称：</view>
					<view class="item_content">{{ option.equipment }}</view>
				</view>
				<view class="list_item">
					<view class="item_name">设备品牌：</view>
					<view class="item_content">{{ option.brand }}</view>
				</view>
				<view class="list_item">
					<view class="item_name">设备型号：</view>
					<view class="item_content">{{ option.model }}</view>
				</view>
				<view class="list_item">
					<view class="item_name">出厂编号：</view>
					<view class="item_content">{{ option.factoryNo }}</view>
				</view>
				<view class="list_item">
					<view class="item_name">问题描述：</view>
					<view class="item_content">{{ option.description }}</view>
				</view>
				<view class="list_item high">
					<view class="item_name">图片：</view>
					<view class="item_content pic">
						<image v-for="item in option.pictureList" :key="item" :src="item" mode="aspectFill" @click="preview"></image>
						<!-- <image :src="item" v-for="item in option.pictureList" :key="item"></image> -->
					</view>
				</view>
				<view class="list_item high" style="margin-top: 10rpx;">
					<view class="item_name">视频：</view>
					<view class="item_content vid">
						<!-- <video :src="vid"></video> -->
						<video id="myVideo" :src="option.videoUrl" controls></video>
					</view>
				</view>
			</view>
		</view>
		<view class="eval">
			<view class="eval_title">本次维修服务评价:</view>
			<view class="repairPeople">
				<view class="repairPeople_title">
					<view class="title_text">维修人员：</view>
					<view class="stars">
						<u-rate :count="5" :value="appress.repairScore" readonly ></u-rate>
					</view>
				</view>
				<view class="eval_text">
					<view>服务评语：</view>
					<view>{{ appress.repairComment }}</view>
				</view>
				<view class="repairPeople_title">
					<view class="title_text">客服人员：</view>
					<view class="stars">
						<u-rate :count="5" :value="appress.serviceScore" readonly ></u-rate>
					</view>
				</view>
				<view class="eval_text">
					<view>服务评语：</view>
					<view>{{ appress.serviceComment }}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		dateTimeFormat
	} from '@/utils/utils.js'
export default {
	data() {
		return {
			option:{},
			appress:{},
		};
	},
	methods: {
		preview(e) {
			uni.previewImage({
				current: e.currentTarget.dataset.url,
				urls: this.option.pictureList
			});
		},
		getOrderDetail(orderNo){
			this.$newapi.getOrderDetail({orderNo}).then(res=>{
				if(res.code == 200){
					this.appress = res.data
				}
			})
		}
	},
	/**
	 * 生命周期函数--监听页面加载
	 */
	onLoad(options) {
		this.option = JSON.parse(options.item)
		this.option.pictureList = this.option.pictureUrl.split(',')
		this.option.orderDate = dateTimeFormat(this.option.orderDate)
		this.getOrderDetail(this.option.orderNo)
	},
};
</script>

<style lang="less" scoped>
.detailsinfo {
	width: 100%;
	padding-bottom: 50rpx;
	background-color: #fff;
}

.details_title {
	width: 95%;
	// height: 105rpx;
	display: flex;
	flex-direction: row;
	margin-left: auto;
	margin-right: auto;
	margin-top: 20rpx;
}

.details_title view:nth-child(1) {
	width: 20%;
	height: 100%;
	font-size: 32rpx;
	color: black;
	line-height: 105rpx;
	font-weight: 600;
	text-align: center;
	
}

.details_title view:nth-child(2) {
	width: 70%;
	height: 100%;
	font-size: 32rpx;
	color: black;
	line-height: 105rpx;
	font-weight: 600;
	text-align: left;
}

.detail_content {
	width: 100%;
	// height: 1100rpx;
}

.detail_header {
	width: 85%;
	// height: 100rpx;
	margin-left: auto;
	margin-right: auto;
}

.information {
	width: 100%;
	// height: 50rpx;
}

.information view {
	width: 100%;
	// height: 50rpx;
	line-height: 60rpx;
	text-align: left;
	font-size: 28rpx;
	color: #318bf5;
}

.detail_list {
	width: 75%;
	// height: 1100rpx;
	margin-right: auto;
	margin-left: auto;
}

.list_item {
	width: 100%;
	// height: 50rpx;
	display: flex;
	flex-direction: row;
}

.item_name {
	width: 30%;
	// height: 50rpx;
	line-height: 60rpx;
	color: black;
	text-align: left;
	font-size: 28rpx;
}

.item_content {
	width: 70%;
	// height: 50rpx;
	line-height: 60rpx;
	text-align: left;
	font-size: 28rpx;
	color: #a0a0a0;
}

.high {
	height: 200rpx;
}

.pic {
	height: 200rpx;
	display: flex;
}

.pic image {
	width: 200rpx;
	height: 200rpx;
	margin-top: 10rpx;
}

.vid {
	height: 200rpx;
}

.vid video {
	width: 200rpx;
	height: 200rpx;
	// margin-top: 10rpx;
}

.eval {
	width: 100%;
	margin-top: 30rpx;
	// height: 350rpx;
}

.eval_title {
	width: 85%;
	// height: 50rpx;
	line-height: 60rpx;
	color: black;
	font-size: 30rpx;
	text-align: left;
	margin: 0 auto;
	color: #318bf5;
}

.repairPeople {
	width: 75%;
	// height: 200rpx;
	margin: 0 auto;
}

.repairPeople_title {
	width: 100%;
	// height: 50rpx;
	display: flex;
	flex-direction: row;
}

.title_text {
	width: 30%;
	// height: 50rpx;
	font-size: 30rpx;
	color: black;
	line-height: 60rpx;
	text-align: left;
}

.stars {
	width: 70%;
	// height: 50rpx;
	display: flex;
	flex-direction: row;
}

.stars_item {
	width: 33rpx;
	height: 33rpx;
	margin-top: 8.5rpx;
	margin-left: 10rpx;
}

.stars_item image {
	width: 33rpx;
	height: 33rpx;
}

.eval_text {
	width: 100%;
	// height: 50rpx;
	display: flex;
	flex-direction: row;
}

.eval_text view {
	// height: 50rpx;
	font-size: 30rpx;
	color: black;
	line-height: 60rpx;
	text-align: left;
}

.eval_text view:nth-child(1) {
	width: 30%;
}

.eval_text view:nth-child(2) {
	width: 70%;
}
</style>
